<template>
	<div class="login">
		<div class="model">
			<div class="title">账号登录</div>
			<el-form :rules="rules" :model="ruleForm" ref="ruleForm">
				<el-form-item class="item" prop="phone" label="手机号">
					<el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item class="item" prop="password" label="密码">
					<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item class="item">
					<span class="forget" @click="forget">忘记密码</span>
				</el-form-item>
				<el-form-item class="item button">
					<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
				</el-form-item>
				<el-form-item class="item">
					<p class="tips">
						没有账号,<span>马上注册</span>
					</p>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts">
	import { Component, Vue } from "vue-property-decorator";

	const validatephone = (rule:any,value:string,callback:any)=>{
		if(!value){
			console.log(rule)
			console.log(value)
			callback(new Error('手机号不能为空'))
		}else{
			if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(value))){
				callback(new Error('请输入正确手机号'))
			}
			callback();
		}
	}
	const validatepassword = (rule:any,value:string,callback:any)=>{
		if(!value){
			callback(new Error('密码不能为空'))
		}
		else{
			// if(this.ruleForm.password !== ''){
			// 	this.$refs.ruleForm.validateField('密码不能为空')
			// }
			callback();
		}
	}
	@Component({

	})

	export default class login extends Vue{
		private ruleForm = {
			phone:'17712341234',
			password:'123456'
		}
		// private phone: number = '';
		// private password: string = '';
		private rules = {
			phone:[{trigger: 'blur', validator: validatephone }],
			password:[{trigger: 'blur', validator: validatepassword }],
		}
	    // 声明周期钩子
	    mounted () {
	      // this.greet()
	    }

	    // 计算属性
	    get computedMsg () {
	      return 'computed ' + this.msg
	    }

	    // 方法
	    greet () {
	      // alert('greeting: ' + this.msg)
	    }

	    // 忘记密码
	    forget(){
	    	this.$router.push({path:'/forget'})
	    }
	    private submitForm(){
	    		// console.log(this.$refs[ruleForm].validate())
	    	(this.$refs.ruleForm as ElForm).validate((valid)=>{
	    		if(valid){
	    			this.$router.push({path:'/home'})
	    			return false;
	    			// 登录请求
	    			this.$post('/login',{
	    				mobile:this.ruleForm.phone,
	    				pwd:this.ruleForm.password
	    			}).then(res=>{
	    				if(res.code=="5000"){
	    					this.$message.success('登录成功!');
	    				}
	    			})
	    		}
	    	})
	    }
	}
</script>
<style lang="scss" scoped>
	.model{
		position: fixed;
	    top: 50%;
	    left: 50%;
	    background-color: #fff;
	    box-shadow: 0 0 10px #eee;
	    border-radius: 5px;
	    padding: 30px;
	    /* width:50%; */
	    /* height: 50%; */
		-webkit-transform: translateX(-50%) translateY(-50%);
		.title{
			text-align: center;
			line-height: 40px;
			margin-bottom: 20px;
			font-size: 18px;
		}
		.item{
			margin-bottom: 20px;
			width: 300px;
			>>> label{
				width: 90px;
				line-height: 40px;
				font-size: 14px;
				display: flex;
				text-align-last: justify;
				span{
					
					width: 60px;
				}
			}
			.input{
				width: 100%;
				button{
					width: 100%;
				}

			}
			.forget{
				display: block;
				width: 100%;
				text-align: right;
				cursor: pointer;
				color: #007fff;
			}
			.tips{
				width: 100%;
				text-align: center;
				line-height: 40px;
				span{
					cursor: pointer;
					color: #007fff;
				}
			}
		}
		.item:last-child{
			margin: 0;

		}
		.button{
			button{
				width: 100%;
			}
		}
	}
</style>